<template>
  <a-form-model-item :label="label" :prop="prop" :class="isSmallSize ? 'smallSize' : ''">
    <a-range-picker
      class="readonly"
      v-if="readonly"
      v-model="form[prop]"
      :placeholder="placeholder"
      :format="format"
      disabled
      style="width: 100%; background-color: #fff; color: rgba(0, 0, 0, 0.65); cursor: auto"
    />
    <a-range-picker
      v-else
      v-model="form[prop]"
      :show-time="showTime"
      :mode="mode"
      :placeholder="placeholder"
      :format="format"
      :disabled="disabled"
      :valueFormat="valueFormat"
      :disabled-date="disabledDate"
      @change="onChange"
      @calendarChange="calendarChange"
      style="width: 100%"
    />
  </a-form-model-item>
</template>

<script>
import moment from 'moment';

export default {
  name: 'DatePicker',
  props: {
    // 默认开启弹窗日期time | date | month | year | decade
    mode: {
      type: Array,
      default: () => {
        return ['date', 'date'];
      },
    },
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute',
    },
    // 文字
    label: {
      type: String,
      default: '',
    },
    // 是否选择时间
    showTime: {
      type: Boolean,
      default: false,
    },
    // 显示日期格式
    format: {
      type: String,
      default: 'YYYY-MM-DD',
    },
    // 生成数据日期格式
    valueFormat: {
      type: String,
      default: 'YYYY-MM-DD',
    },
    placeholder: {
      type: Array,
      default: () => {
        return ['开始日期', '结束日期'];
      },
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false,
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false,
    },
    // 是否不能跨月选择
    isMonth: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    format: {
      handler: function (val) {
        if (val) {
          const length = val + '';
          if (length.length > 16) {
            this.isSmallSize = true;
          } else {
            this.isSmallSize = false;
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      isSmallSize: false,
      inputValue: undefined,
      choiceDate: '',
    };
  },
  methods: {
    // checkIt() {
    //   this.$emit('showDialog');
    // }
    onChange([startTime]) {
      this.choiceDate = startTime;
    },
    calendarChange([startTime]) {
      this.choiceDate = startTime;
    },
    disabledDate(current) {
      if (this.isMonth) {
        if (this.choiceDate) {
          return current.month() + 1 != moment(this.choiceDate).format('MM') || current > moment().endOf('day');
        } else {
          return current && current > moment().endOf('day');
        }
      }
    },
  },
};
</script>
<style>
.readonly .ant-input-disabled {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.65);
  cursor: auto;
}
.smallSize .ant-calendar-picker-input input {
  font-size: 12px;
}
</style>
